<template>
  <Temp @close="close" :show-clear="false">
    <div class="brightness">
      <span>场景亮度：</span>
      <el-slider
        :format-tooltip="formatTooltip"
        @input="setBrightness"
        :max="2"
        :min="0"
        :step="0.1"
        v-model="brightness"
      ></el-slider>
    </div>
  </Temp>
</template>

<script>
import Temp from '../temp'
import { getAction } from '@/utils/helper'

const brightness = {}

export default {
  name: 'Brightness',
  components: {
    Temp
  },
  inject: ['viewerId'],
  data() {
    return {
      brightness: 1,
      initialed: false
    }
  },
  async created() {
    const { toolManager } = await getAction(this.viewerId)
    brightness[this.viewerId] = toolManager.brightness
    this.brightness =
      brightness[this.viewerId].getBrightness()
    this.initialed = true
  },
  methods: {
    close() {
      this.$emit('close')
    },
    formatTooltip(value) {
      return `当前亮度：${value}`
    },
    setBrightness() {
      if (this.initialed && brightness[this.viewerId]) {
        brightness[this.viewerId].setBrightness(
          this.brightness
        )
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.brightness {
  width: 200px;
}
</style>
